<template>
	<view>
		<z-paging :refresher-enabled="true" @onRefresh="downRefresh"  show-refresher-update-time  ref="paging" v-model="dataList" @query="queryList">
			<!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
			<!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
			<view slot="top"  class="">
				<u-navbar :borderBottom="false" back-text=" " :title="title"></u-navbar>
				<view class="top_box">
					<view class="search_box_search">
						<view class="search_input">	
							<input class="input_font" v-model="search_text" placeholder="请输入搜索内容" type="text" />
						</view>	
						<image style="width: 64rpx; height: 64rpx;" @click="downRefresh" src="https://www.mengkahuyu.com/index_png/search_cion.png" mode=""></image>
					</view>
					<view v-if="typeList.length>0" class="shop_type_box">
						<view @click="chooseType(index)"  :class="item.isChoose?'isChoose':''" v-for=" (item, index) in typeList" :key="index" class="shop_type_box_item">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			
		    <view class="list" >
				
				<u-waterfall v-model="dataList" ref="uWaterfalls">
					<template v-slot:left="{leftList}">
						<view class="left_box">
							<view  @click="seeInfo(item)" class="demo-warter" v-for="(item, index) in leftList" :key="index">
								<!-- <u-image width="100%" border-radius="20rpx" mode="widthFix" :src="item.pic"></u-image> -->
								<image style="width: 100%;height: 300rpx;"  :src="item.pic[0]" mode="widthFix"></image>
								<view class="shop_item_info">
									<view class="shop_title  uni-ellipsis">{{item.name}}</view>
									<view class="price_box">
										<span class="price">¥{{item.price}}</span>
										<span class="byNoew">立即购买</span>
									</view>
								</view>
							</view>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view  class="right_box">
							<view @click="seeInfo(item)" class="demo-warter" v-for="(item, index) in rightList" :key="index">
								<!-- <u-image width="100%" border-radius="20rpx" mode="widthFix" :src="item.pic"></u-image> -->
								<image style="width: 100%;height: 300rpx;" :src="item.pic[0]" mode="widthFix"></image>
								<view class="shop_item_info">
									<view class="shop_title  uni-ellipsis">{{item.name}}</view>
									<view class="price_box">
										<span class="price">¥{{item.price}}</span>
										<span class="byNoew">立即购买</span>
									</view>
								</view>
							</view>
						</view>
					</template>	
				</u-waterfall>
		    </view>
			
			
		</z-paging>
	</view>
</template>

<script>
	import logistics from '@/componts/xinyu-logistics/xinyu-logistics.vue'
	export default {
		components: { logistics },
		data() {
			return {
				title:'已代买商品',
				cid:'',//分类id
				dataList:[],
				search_text:'',
				typeList:[]
			}
		},
		onLoad(data) {
			
		},
		onShow() {
			this.getTypeList()
			var token = uni.getStorageSync('token')
			this.chooseItem = []
			if(token){
				if(this.$refs.paging){
					this.$refs.uWaterfalls.clear();
					setTimeout(()=>{
						this.$refs.paging.reload()	
					},100)
					
				}
			}
		},
		methods: {
			getTypeList(){
				// 获取分类列表
				this.$wqzApi.cate_list({}).then(res=>{
					res.data.forEach((item,index)=>{
						// console.log(item[index])
						res.data[index].isChoose = false
						
					})
					this.typeList = res.data
				})
			},
			chooseType(index){
				//选择分类
				this.typeList.forEach((ite,ind)=>{
					if(ind == index){
						if(this.typeList[ind].isChoose == true){
							this.typeList[ind].isChoose = false
							this.cid = ''
						}else{
							this.typeList[ind].isChoose = true
							this.cid = this.typeList[ind].id
						}
						// this.typeList[ind].isChoose = true
						// this.cid = this.typeList[ind].id
						this.downRefresh()
					}else{
						this.typeList[ind].isChoose = false
					}
				})
			},
			seeInfo(item){
				uni.navigateTo({
					url:'/pages/shop_info/shop_info?id='+item.id
				})
			},
			downRefresh(){
				if(this.$refs.uWaterfalls){
					this.$refs.uWaterfalls.clear();
					setTimeout(()=>{
						this.$refs.paging.reload()		
					},100)
				}	
			},
			// seeInfo(url) {
			// 	if(url){
			// 		uni.showLoading({
			// 			title: '加载中'
			// 		});
			// 		uni.previewImage({
			// 			urls: [url],
			// 			complete: () => {
			// 				uni.hideLoading();
			// 			}
			// 		});
			// 	}
			// },
			// 订单支付
			wechatePay(id){
				var type = typeof id
				if(type == 'object'){
					id = id.join(',')
				}
				var data = {
					id:id
				}
				uni.showLoading({	
					mask:true,
					title:'支付中...'
				})
				this.$wqzApi.pay(data).then(res=>{
					
					var data =JSON.parse(res.data) 
					// console.log(data , '返回信息')
					// 吊起微信支付
					wx.requestPayment({
					  timeStamp: data.timeStamp,
					  nonceStr: data.nonceStr,
					  package: data.package,
					  signType: 'MD5',
					  paySign: data.paySign,
					  success (res) {
						  uni.hideLoading()
						  uni.showToast({
						  	title:'支付成功',
							icon:'none'
						  })
						 this.$refs.paging.reload()	
					  },
					  fail (res) {
						  uni.hideLoading()
						  
						  // console.log(res , '支付失败返回')
					  }
					})
				}).catch(err=>{
					
				})
				
				
				
			},
			queryList(pageNo, pageSize) {
				// 此处请求仅为演示，请替换为自己项目中的请求
				var data = {
					name:this.search_text,
					page:pageNo,
					limit:pageSize,
					cid:this.cid,
					type:2
				}
				var that = this
				this.$wqzApi.index_goods_list(data).then(res=>{
					// this.dataList = this.flowList.concat(res.data.list) 
					res.data.list.forEach((item,index)=>{
						res.data.list[index].pic = item.pic.split(',')
					})
					this.$refs.paging.complete(res.data.list);
				}).catch(err=>{
					this.$refs.paging.complete(false);
				})
			},
			
			
			navTo(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("index.scss");
</style>
